<template>
  <div style="min-height: 52vh">
    <div class="lianxi">
      <div class="contactWm">联系我们</div>

      <ul class="ulClass">
        <li class="liClass" style="margin-top: 30px; border-bottom: 1px dashed #d8d8d8">
          <div class="liTitle">公司名称：</div>
          <div class="xiangqing">
            {{ shopInfo.company_title }}
          </div>
        </li>

        <li class="liClass" style="border-bottom: 1px dashed #d8d8d8">
          <div class="liTitle">地址：</div>
          <div class="xiangqing">
            {{ shopInfo.address }}
          </div>
        </li>

        <li class="liClass" style="border-bottom: 1px dashed #d8d8d8">
          <div class="liTitle">联系人：</div>
          <div class="xiangqing">
            {{ shopInfo.name }}
          </div>
        </li>

        <li class="liClass" style="border-bottom: 1px dashed #d8d8d8">
          <div class="liTitle">手机号码：</div>
          <div class="xiangqing">
            {{ shopInfo.mobile  }}
          </div>
        </li>

        <li class="liClass" style="border-bottom: 1px dashed #d8d8d8">
          <div class="liTitle">联系电话：</div>
          <div class="xiangqing">
            {{ shopInfo.contact_phone }}
          </div>
        </li>

        <li class="liClass" style="border-bottom: 1px dashed #d8d8d8">
          <div class="liTitle">邮箱：</div>
          <div class="xiangqing">
            {{ shopInfo.email }}
          </div>
        </li>

        <li class="liClass">
          <div class="liTitle">传真：</div>
          <div class="xiangqing">
            {{ shopInfo.fax  }}
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: "ContactUs",
  computed: {
    ...mapState([
      "userInfo",
    ]),
  },
  data() {
    return {
      shopInfo:{}
    };
  },
  created() {
    if (this.$route.query.shop_id) {
      this.shop_id = this.$route.query.shop_id
    } else {
      this.shop_id = this.userInfo.id
    }
    this.getData();
  },
  methods: {
    getData() {
      this.$httpApi("/api/shopContactUs", {
        shop_id: this.shop_id
      }, 'get').then(res => {
        this.shopInfo = res.data;

      })
    }
  }
};
</script>

<style lang="less" scoped>
.lianxi {
  width: 1400px;
  margin: 30px auto;
  min-height: 489px;
  background-color: #fff;
}

.xiangqing {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 42px;
  font-style: normal;
  text-transform: none;
}

.liTitle {
  height: 100%;
  line-height: 50px;
  width: 150px !important;
  margin-right: 10px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #333333;
  text-align: right;
  font-style: normal;
  text-transform: none;
}

.liClass {
  width: 975px;
  display: flex;
  align-items: center;
  height: 50px;
  // background-color: aliceblue;
  margin-left: 24px;
}

.ulClass {
  width: 100%;
  // background-color: aqua;
}

.contactWm {
  width: 100%;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 16px;
  color: #333333;
  line-height: 32px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  height: 50px;
  background: #ffffff;
  border-radius: 0px 0px 0px 0px;
  padding-left: 24px;
  line-height: 50px;
  border-bottom: 3px solid #f5f5f5;
}
</style>